<template>
	<!-- 当前预约：卡片效果 -->
	<view class="me-booking-box" >
		<view class="no-booking-box" v-if="meBooking == false">
			<span style="color: #ffffff;margin: 20rpx;">当前预约</span>
			<view class="no-booking-text" @click="continueIt">暂无预约</view>
		</view>
		<view class="have-booking-box" v-if="meBooking == true" >
			<view class="location-box">
				<span style="margin-right: 100rpx;">翻斗花园图书馆-M层-西区</span>
				<span style="font-size: 42rpx;">033</span>
				<span>座位</span>
			</view>
			<span style="font-size: 56rpx;font-weight: 600;">学习中...</span>
			<view class="have-booking-time">
				<span style="margin-right: 40rpx;">当前预约时段</span>
				<span>12:30-15:00</span>
				<view class="operate-btns-box">
					<button class="mini-btn renewal-btn" type="default" size="mini" @click="continueIt">续约</button>
					<button class="mini-btn leave-btn" type="default" size="mini">暂离</button>
					<button class="mini-btn refund-btn" type="default" size="mini" @click="cancelIt">退座</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, computed, nextTick, watch, watchEffect, onMounted } from 'vue';
// 动态数据：用户是否有预约
let meBooking = ref(true);
// 功能函数：取消当前座位
const cancelIt = () => {
	meBooking.value = false;
	console.log(meBooking.value)
};
// 功能函数：续约当前座位
const continueIt = () => {
	meBooking.value = true;
	console.log(meBooking.value)
	uni.showToast({
		title:"成功续约"
	})
};
</script>

<style lang="scss" scoped>
@mixin flex2 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
@mixin flex6 {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
// 预约座位 小卡片
.me-booking-box {
	width: 680rpx;
	height: 300rpx;
	margin: 15rpx 35rpx 15rpx 35rpx;
	border-radius: 18rpx;
	background-color: #acacac;
}
// 预约座位：无座位小卡片
.no-booking-box {
	@include flex2;
	border-radius: 18rpx;
	.no-booking-text {
		margin-top: 30rpx;
		margin-left: 220rpx;
		font-weight: 600;
		font-size: 56rpx;
		color: #ffffff;
	}
}
// 预约座位：已预约小卡片
.have-booking-box {
	height: 100%;
	border-radius: 18rpx;
	background-color: rgb(44, 108, 211);
	color: #ffffff;
	@include flex6;
	.location-box {
		margin: 8rpx 0 0 -8rpx;
	}
	.have-booking-time {
		margin: 10rpx 0 20rpx -8rpx;
		justify-content: left;
	}
}

// 三个操作按钮
.operate-btns-box{
	display: flex;
	justify-content: flex-start;
	margin-top: 20rpx;
	.mini-btn{
		// margin: 0  100rpx 0  10rpx;
	}
	.renewal-btn{
		margin-left: 10rpx;
		color: #ce1fc0;
	}
	.leave-btn{
		margin-left: 70rpx;
		margin-right: 70rpx;
		color: #cebd00;
		// border: solid thin #cebd00;
	}
	.refund-btn{
		margin-right: 10rpx;
		color: #ff5500;
		// border: solid thin #ff5500;
	}
}
:deep(uni-button:after){
	border: none;
}
</style>
